$(function () {
   function ars(ele, cls) {
      ele.addClass(cls).siblings().removeClass(cls)
   }
   // header
   {
      {
         const count = $('header .title .title-lenght')
         $('header .title input').on('input', function () {
            const v = this.value
            if (v.length > 100) this.value = v.slice(0, 100)
            count.text(this.value.length)
         })
      }
      const fixed = $('.fixed')
      {
         $('.fixed input[type=text]').on('keyup', function (event) {
            if (event.key === 'Enter') $(this).parents('form').children('button').click()
            return false
         })
         const upimg = $('.fixed .upimg')
         const addtab = $('.addtab')
         const addlink = $('.addlink')
         const exportd = $('.exportd')
         const push_article = $('.push_article')
         $('.list-box .list-button').on('click', function () {
            const t = $(this)
            const box = t.parents('.list-box:eq(0)')
            if (!box) return
            const i = t.index()
            ars(t, 'active')
            ars(box.find('.list-option').eq(i), 'dis')
         })
         document.addEventListener('click', function (event) {
            $('.fixed .error').removeClass('error')
         }, {
            capture: true
         })
         $('.fixed .c').on('click', function () {
            fixed.hide()
            exportd.hide()
            upimg.hide()
            addtab.hide()
            addlink.hide()
            push_article.hide()
         })
         $('.upimg-btn').on('click', function () {
            upimg.show()
            fixed.show()
         })
         $('.addtab-btn').on('click', function () {
            addtab.show()
            fixed.show()
         })
         $('.addlink-btn').on('click', function () {
            addlink.show()
            fixed.show()
         })
         $('.export-btn').on('click', function () {
            exportd.show()
            fixed.show()
         })
         $('.release').on('click', function () {
            push_article.show()
            fixed.show()
         })
      }
   }
   // 发布
   {
      // 封面类型切换
      const cover_list = $('.cover-list')
      const files = $('.cover-list .fmimage_box input')
      $('#radio1').on('change', function () {
         cover_list.removeClass('fmx1')
         cover_list.removeClass('fmx2')
      })
      $('#radio2').on('change', function () {
         cover_list.addClass('fmx1')
         cover_list.removeClass('fmx2')
      })
      $('#radio3').on('change', function () {
         cover_list.removeClass('fmx1')
         cover_list.addClass('fmx2')
      })
      // 封面预览
      const fmimage_box = $('.fmimage_box')
      $('.fmimage_box input').on('change', function () {
         const [file] = this.files
         if (file) {
            $(this).parents('.fmimage_box:first').addClass('file')
         } else {
            $(this).parents('.fmimage_box:first').removeClass('file')
         }
         const url = URL.createObjectURL(new Blob([file]))
         $(this).parents('.fmimage_box:eq(0)').css({
            backgroundImage: `url(${url})`
         })
      })
      // 文章标签
      {
         // 文章标签移除
         $('.tag-box').on('click', '.del', function () {
            $(this).parents('.tag').remove()
         })
         const tag_input = $('.tag-box .add input')
         window.addTag = function (v) {
            if (!v) return
            tag_input[0].parentNode.insertAdjacentHTML('beforebegin', `
               <span class="tag">
                  <span class="text">${v}</span>
                  <input value="${v}" name="tag" style="display: none;">
                  <span class="del">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
                        <path
                           d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z">
                        </path>
                     </svg>
                  </span>
               </span>
            `)
         }
         // 文章标签添加
         tag_input.on({
            blur() {
               const v = this.value.replace(/ /g, '')
               if (!v) return
               this.value = ''
               addTag(v)
            },
            keyup(event) {
               if (event.key == 'Enter') {
                  if (!this.value.trim()) {
                     alterBlock('请键入标签')
                     return
                  }
                  this.blur()
               }
            }
         })
      }
      // 文章分类
      {
         const box = $('.class-box .class-r')
         let class_list
         // 添加分类
         window.addClass = function (className, checked) {
            const l = box.find('label input:checked').length
            if (l >= 3) return alterBlock('最多选择三个分类专栏')
            let code = ''
            for (let i = 0; i < 8; i++) {
               code += Math.floor(Math.random() * 10)
            }
            box.append(`
            <label for="class-${code}">
               <input type="checkbox" name="class" value="${className}" id="class-${code}"">
               <span class="class-word">
                  ${className}
               </span>
            </label>
            `)
            $('#class-' + code).prop('checked', checked)
            class_list = box.find('label')
            return true
         }
         // 文章分类移除
         $('.class-box').on('click', '.del', function () {
            $(this).parents('.tag').remove()
         })
         // 文章分类添加
         $('.class-box .add input').on({
            blur() {
               const v = this.value.replace(/ /g, '')
               if (!v) return
               this.value = ''
               if (!addClass(v, true)) return
               this.parentNode.insertAdjacentHTML('beforebegin', `
               <span class="tag">
                  <span class="text">${v}</span>
                  <span class="del">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
                        <path
                           d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z">
                        </path>
                     </svg>
                  </span>
               </span>
               `)
            },
            keyup(event) {
               if (event.key == 'Enter') {
                  if (!this.value.trim()) {
                     alterBlock('请键入标签')
                     return
                  }
                  this.blur()
               }
            }
         })
         // 文章分类选择
         $('.class-box').on('click', 'label input', function (event) {
            if (box.find('label input:checked').length >= 4) {
               alterBlock('最多选择三个分类专栏')
               return false
            }
         })
      }
   }
});